<template>
  <view class="content">
    <hearbar
      :style="{ paddingTop: configStore.paddingTop + 10 + 'px' }"
    ></hearbar>
    <view class="body back-white b-a p-l-ll p-r-ll p-b-ll">
      <view
        v-for="item in list"
        :key="item.id"
        class="message m-t-ll flex flex-between"
        @click="getdetail(item.id)"
      >
        <view class="flex">
          <up-image
            :src="item.you_img_url"
            width="60px"
            height="60px"
            radius="30px"
          ></up-image>
          <view class="m-l-l flex flex-col flex-between">
            <view class="font-16 bolder">
              {{ item.you_name }}
            </view>
            <rich-text
              :nodes="item.singer_first.content"
              style="opacity: 0.8"
            ></rich-text>
          </view>
        </view>
        <view>
          {{ handeTime(item.singer_first.create_time) }}
        </view>
      </view>
    </view>
    <tabbar></tabbar>
  </view>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getMessageList } from "../../utils/api";
import moment from "moment";
const list = ref([]);
const handeTime = (time) => {
  return moment(time).format("YYYY-MM-DD hh:mm:ss");
};
onMounted(() => {
  getMessageList()
    .then((res) => {
      if (res.code === 200) {
        list.value = res.data;
      }
    })
    .catch(() => {});
});
const getdetail = (id) => {
  uni.redirectTo({
    url: `/pages/message/messageContent?id=${id}`,
  });
};
</script>

<style lang="less" scoped>
.message {
  width: 100%;
}
</style>
